@import "../module/task2_framework";
@import "../module/color-framework";
@import "../module/variablae-value-framework";






body{
  background-color:$dark-blue-color ;
}

header{
  position: sticky;
  left: 0;
  top: 0;
  background: #29bde0;
}

.header{
  @extend %allot;
  height: 3.1rem;
  padding: 0 $value-gap;

  .return{
    background-image: url("../images/return.png");
    background-repeat: no-repeat;
    background-size: 100%;
    width: 28px;
    height: 30px;
    visibility: hidden;

  }

  .close{
    background-image:url("../images/close.png");
    background-repeat: no-repeat;
    background-size: 100%;
    width: 28px;
    height: 30px;
  }
}


.nav{
  @include  space-between($parallel,$allot,$vertical-center);
  height: 3rem;
  background-color: rgba(255,255,255,0.5);
  padding: 0 $value-gap;
  position: relative;

  audio{
    position: absolute;
    top: 1px;
    right: 10px;
    transform: rotate(180deg);
    opacity: .0;
  }
  .round{
    @extend %vertical-center;
    width: 35px;
    height: 35px;
    background-color: $orange-color;
    border-radius: 50%;

    .triangle{
      @include triangle(9px,18px,9px,#ffffff)
    }
  }

}

.triangle-t{
  @include  triangle-x(10px,5px,5px,rgba(255,255,255,0.5));
  margin-left:$value-gap;
}

.voice{
  font-size:13px;
  color:$white-color;
  text-align: $left;
  margin-left: 15px;
  letter-spacing: 2px;
}


.boxes{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-flow: wrap;
  padding-bottom: 20vh;
}

.boxes .profession-box {
  width: 25vw;
  height: 25vw;
  border: 2px solid #fff;
  margin: 3.5vw;
}
.boxes .profession-box .profession-flex {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%; }
.boxes .profession-box .profession-flex .profession-name {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  color: #565656;
  background: #f5c97b;
  flex: auto;
  width: 100%; }
.boxes .profession-box .profession-flex .profession-num {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1.1rem;
  color: #fff;
  height: 6vw;
  width: 100%;
  background: #83b09a; }



footer {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #29bde0;
  height: 12vh;


  button {
    width: 90%;
    height: 3.5rem;
    background-color: #fab344;
    font-size: 17px;
    color: white;

  }

}
.knife1{
  text-align: -webkit-center;
}

.knife {
  display: none;
  width: 4.5vw;
  height: 4.5vw;
  margin-top: 2vw;
  background: url(../images/ym.png) no-repeat 0 0/100%;
  list-style: none;
}

//#main {
//  display: flex;
//  flex-direction: row;
//  justify-content: flex-start;
//  align-items: center;
//  flex-flow: wrap;
//}





//footer {
//  @extend %vertical-center;
//  width: 100%;
//  height: 120px;
//  position: fixed;
//  bottom: 0;
//  background: $dark-blue-color;
//  flex-direction: column;
//
//
//}
//button{
//  width: 100%;
//  border: 0;
//  left: 0;
//  right: 0;
//  padding: 18px 34vw;
//  background: $orange-color;
//  font-size: 23px;
//  color: white;
//}





